<template>

    <div class="blog-details-container">
        <!---文章标题作者信息发布时间摘要部分开始-->
        <div class="blog-details-container-header">
            <h2>{{article.title}}</h2>
            <div style="display: flex;justify-content:space-around;color:#ccc">
                <div class="blog-details-container-header-subtitle"><i class="el-icon-user"></i>&nbsp;{{article.username}}
                </div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-date"></i>&nbsp;{{article.createTime}}
                </div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-s-grid"></i>{{article.catalogName}}
                </div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-view"></i>{{article.browseNumber}}
                </div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-chat-line-round"></i>{{article.replyNumber}}
                </div>
                <div v-if="isAdmin" class="blog-details-container-header-subtitle"><i class="el-icon-edit"></i><a :href="'/pEditArticle/'+article.aid">编辑</a></div>
            </div>
            <hr style="margin-top:4px;">
            <div class="blog-details-container-summary">
                {{article.summary}}
            </div>
        </div>
        <!---文章标题作者信息发布时间摘要部分结束-->
        <!----文章详情markdown html显示部分开始------>
        <div class="markdown-body" v-html="article.content" v-highlight @mouseover="initCopyPastePlugin">

        </div>
        <!----文章详情markdown html显示部分结束------>
        <div>
            <el-divider content-position="left"><i class="el-icon-share"></i>分享</el-divider>
        </div>
        <!--vshare分享插件-->

        <share :config="config"></share>


        <br>
        <!--打赏作者-->
        <el-divider content-position="left"><i class="el-icon-coin"></i>打赏</el-divider>
        <div>
            <el-image
                    style="width: 120px; height: 120px"
                    src="http://img.simoniu.com/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%89%93%E8%B5%8F002.jpg"
                    fit="fit"></el-image>
            <el-image
                    style="width: 120px; height: 120px"
                    src="https://img.simoniu.com/%E5%BE%AE%E4%BF%A1%E6%89%93%E8%B5%8F001.png"
                    fit="fit"></el-image>
        </div>

        <!--评论组件-->
        <MyReply ref="myreply"></MyReply>
    </div>

</template>

<script>
    import MyReply from "@/components/pc/MyReply";
    //代码粘贴要使用到jQuery
    import $ from 'jquery'
    //引入分享组件
    import Share from 'vue-social-share'
    import request from "@/util/request";

    Vue.use(Share);
    export default {
        name: "MyBlogDetailsContent",
        components:{
           MyReply
        },
        data() {
            return {
                isAdmin: this.$store.state.currentIsAdminStatusData, //默认不是管理员
                //当前的文章编号
                currentArticleId: this.$route.query.aid,
                //当前文章对象
                article:{},
                //分享组件的配置对象
                config: {
                    url: 'https://www.simoniu.com/pBlogDetails?catalog='+this.$store.state.currentCatalogNameData+'&aid='+this.$route.query.aid,
                    disabled: ['google', 'facebook', 'twitter'] // 禁用的站点
                }
            }
        },
        mounted() {
            //console.log('当前的文章编号是：'+this.currentArticleId);
            //this.initArticle();
            this.refreshCurrentArticle(this.currentArticleId);
        },
        methods:{

            //刷新当前文章
            refreshCurrentArticle(aid){
                request.get('/blog/article/'+aid).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentArticleId = aid;
                        this.article = resp.data.data;
                        //console.log("refreshCurrentArticle==>"+this.currentArticleId);
                        //在刷新完文章之后，通知reply获得最新的文章ID。
                        this.$refs.myreply.initCurrentReplyPager(this.currentArticleId,1);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            initCopyPastePlugin: function () {
                /*代码复制粘贴功能原生脚本*/
                let codeblocks = $("pre");
                //循环每个pre代码块，并添加 复制代码
                let currentCode;
                //console.log("初始化的代码块数量是：" + codeblocks.length);
                for (let i = 0; i < codeblocks.length; i++) {
                    //显示 复制代码 按钮
                    currentCode = codeblocks[i]
                    currentCode.style = "position: relative;"
                    let copy = document.createElement("div")
                    copy.style = "position: absolute;right: 4px;\
    top: 4px;background-color: white;padding: 2px 8px;\
    margin: 8px;border-radius: 4px;cursor: pointer;\
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"
                    copy.innerHTML = "复制"
                    currentCode.appendChild(copy)
                    //让所有 "复制"按钮 全部隐藏
                    copy.style.visibility = "hidden"
                }
                for (let i = 0; i < codeblocks.length; i++) {
                    !function (i) {
                        //鼠标移到代码块，就显示按钮
                        codeblocks[i].onmouseover = function () {
                            codeblocks[i].childNodes[1].style.visibility = "visible"
                        }

                        //执行 复制代码 功能
                        function copyArticle(event) {
                            const range = document.createRange();

                            //范围是 code，不包括刚才创建的div
                            range.selectNode(codeblocks[i].childNodes[0]);

                            const selection = window.getSelection();
                            if (selection.rangeCount > 0) selection.removeAllRanges();
                            selection.addRange(range);
                            document.execCommand('copy');
                            codeblocks[i].childNodes[1].innerHTML = "复制成功"
                            setTimeout(function () {
                                codeblocks[i].childNodes[1].innerHTML = "复制"
                            }, 1000);
                            //清除选择区
                            if (selection.rangeCount > 0) selection.removeAllRanges();

                        }

                        codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);
                    }(i);
                    !function (i) {
                        //鼠标从代码块移开 则不显示复制代码按钮
                        codeblocks[i].onmouseout = function () {
                            codeblocks[i].childNodes[1].style.visibility = "hidden"
                        }
                    }(i);
                }
            }
        }
    }
</script>

<style scoped>
    @import "https://cdn.bootcdn.net/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css";
    .blog-details-container {
        width: 98%;
        background-color: #FFF;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .blog-details-container-header h2 {
        text-align: center;
        color: #336699;
    }

    .blog-details-container-summary {
        background-color: #EEE;
        border: 0px solid #ccc;
        border-radius: 10px;
        padding: 20px 20px;
        margin: 10px;
        display: block;
        color: #666
    }

    .blog-details-container-header-subtitle {
        font-size: small;
    }

    .markdown-body {
        padding: 20px 10px 20px 10px;
        font-size: small;
        background-color: #F6F8FA;
    }

    .markdown-body /deep/ pre{
        background-color: #FFF;
    }

    .markdown-body /deep/ ul li{
        list-style: disc;
    }

    .markdown-body /deep/ ol li{
        list-style: decimal;
    }

    .tag-read {
        position: fixed;
        z-index: 99;
    }
</style>